<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { MbpzAddInputDTO, MbpzGetOutputDTO } from '@/api/xtpz-dto'
import xtpzService from '@/api/xtpz'
import type { FormInstance, FormRules } from 'element-plus'
import treeSelect from '@/components/tree-select-edl/index.vue'
import { getFldm } from '@/utils/get-fldm'
interface Prop {
  ajglgxbm: string | undefined
}

// 入参
const props = defineProps<Prop>()
const emits = defineEmits(['refresh'])
// 生命周期

/*
 * 打开弹框
 */
const loading = ref<boolean>(false)
const dialogVisible = ref<boolean>(false)
// 弹框名称
const title = ref<string>('')
// 弹框类型
const typeValue = ref<string>('')
const openDialog = (row: any, type: string) => {
  // 获取案卷类型
  getAjlx()
  // 清空数据
  ruleForm.value = {
    ajglgxbm: props.ajglgxbm || '',
    bz: '',
    mblxdm: '',
    mblxmc: '',
    mbpzbm: '',
    mbpzmc: '',
    sfqy: 'N',
    sfqyjnml: 'N',
  }
  typeValue.value = type
  if (type === 'update') {
    // 修改
    title.value = '修改模板'
    getMbpz(row)
  } else if (type === 'add') {
    title.value = '添加模板'
    ruleForm.value = {
      ajglgxbm: row?.ajglgxbm,
      bz: '',
      mblxdm: '',
      mblxmc: '',
      mbpzbm: '',
      mbpzmc: '',
      sfqy: 'N',
      sfqyjnml: 'N',
    }
  }
  dialogVisible.value = true
}

/*
 * 获取案卷类别
 */
const ajlxList = ref<any[]>([])
const getAjlx = async () => {
  const newArr = await getFldm('gd022')
  ajlxList.value = newArr.filter((item: any) => item.dm !== 'gd0220003')
}

/**
 * 表单
 */
const ruleForm = ref<MbpzAddInputDTO>({
  ajglgxbm: '',
  bz: '',
  mblxdm: '',
  mblxmc: '',
  mbpzbm: '',
  mbpzmc: '',
  sfqy: 'N',
  sfqyjnml: 'N',
})

/**
 * 获取详情
 */
const getMbpz = (row: MbpzGetOutputDTO) => {
  const params = {
    mbpzbm: row.mbpzbm,
  }
  xtpzService
    .getMbpz(params)
    .then((res) => {
      if (res) {
        ruleForm.value = res.data
        ruleForm.value.sfqy = res.data.sfqy ? res.data.sfqy : 'N'
        ruleForm.value.sfqyjnml = res.data.sfqyjnml ? res.data.sfqyjnml : 'N'
      }
    })
    .catch((err) => {
      !err.isError && ElMessage({ type: 'warning', message: err.message })
    })
}

/*
 * 验证表单
 */
const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules<MbpzAddInputDTO>>({
  mblxdm: [{ required: true, message: '必填', trigger: 'change' }],
  mbpzmc: [{ required: true, message: '必填', trigger: 'blur' }],
})
const validateForm = () => {
  ruleFormRef.value?.validate((valid) => {
    if (valid) {
      loading.value = true
      typeValue.value === 'add' ? addMb() : updateMb()
    }
  })
}

/*
 * 添加模板
 */
const addMb = () => {
  const params = {
    ...ruleForm.value,
  }
  xtpzService
    .addMbpz(params)
    .then(() => {
      ElMessage.success('添加成功')
      dialogVisible.value = false
      emits('refresh')
    })
    .catch((err) => {
      !err.isError && ElMessage({ type: 'warning', message: err.message })
    })
    .finally(() => {
      loading.value = false
    })
}

/*
 * 修改模板
 */
const updateMb = () => {
  const params = {
    bz: ruleForm.value.bz,
    mblxdm: ruleForm.value.mblxdm,
    mblxmc: ruleForm.value.mblxmc,
    mbpzbm: ruleForm.value.mbpzbm,
    mbpzmc: ruleForm.value.mbpzmc,
    sfqy: ruleForm.value.sfqy,
    sfqyjnml: ruleForm.value.sfqyjnml,
  }
  xtpzService
    .updateMbpz(params)
    .then(() => {
      ElMessage.success('修改成功')
      dialogVisible.value = false
      emits('refresh')
    })
    .catch((err) => {
      !err.isError && ElMessage({ type: 'warning', message: err.message })
    })
    .finally(() => {
      loading.value = false
    })
}

/**
 * 树点击
 */
const nodeChange = (val: string, node: any, mc: string) => {
  const value = ruleForm.value as any
  value[mc] = node.mc
}
defineExpose({ openDialog })
</script>
<template>
  <el-dialog v-model="dialogVisible" :title="title" width="600px" :close-on-click-modal="false">
    <div class="dialog-box">
      <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="140px" status-icon>
        <el-form-item label="正副案卷" prop="mblxdm">
          <tree-select
            v-model="ruleForm.mblxdm"
            nodeKey="dm"
            :options="ajlxList"
            clearable
            :showSearch="false"
            :disabled="typeValue === 'update'"
            @node-change="(data:string, node:any)=> nodeChange(data, node,'mblxmc')"
          />
        </el-form-item>
        <el-form-item label="模板名称" prop="mbpzmc">
          <el-input v-model="ruleForm.mbpzmc" maxlength="1000" show-word-limit />
        </el-form-item>
        <el-form-item label="是否启用模板" prop="sfqy">
          <el-switch v-model="ruleForm.sfqy" active-value="Y" inactive-value="N" />
        </el-form-item>
        <el-form-item label="是否启用卷内目录" prop="sfqyjnml">
          <el-switch v-model="ruleForm.sfqyjnml" active-value="Y" inactive-value="N" />
        </el-form-item>
        <el-form-item label="备注" prop="bz">
          <el-input v-model="ruleForm.bz" maxlength="1000" show-word-limit />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="validateForm" :loading="loading">保存</el-button>
        <el-button @click="dialogVisible = false">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<style lang="scss" scoped>
.dialog-box {
  width: 100%;
}
</style>
